<template>
  <div class="strut-div" style="position: relative;">

    <div class="tourist-map strut-div">
      <!-- <el-tabs tab-position="bottom" v-model="active">
        <el-tab-pane name="0" label="0">
          <div style="height: 740px;">
            <tourist-world-map ref="touristWorldMap"></tourist-world-map>
          </div>
        </el-tab-pane>
        <el-tab-pane name="1" label="1">
          <div style="height: 740px;">
            <tourist-china-map ref="touristChinaMap"></tourist-china-map>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2" label="2">
          <div style="height: 740px;">
            <tourist-shanxi-map ref="touristShanxiMap"></tourist-shanxi-map>
            <three-dimensional-map ref="threeDimensionalMap"></three-dimensional-map>
          </div>
        </el-tab-pane>
      </el-tabs> -->
      <div style="height: 512px;">
            <tourist-china-map ref="touristChinaMap"></tourist-china-map>
          </div>
    </div>

    <!-- <div class="tourist-map-arrow tourist-map-left" @click="goPrevious"></div>
    <div class="tourist-map-arrow tourist-map-right" @click="goNext"></div> -->
  </div>
</template>

<script>

  // import TouristWorldMap from '@/views/humanistic-tourism/tourist-map/tourist-world-map.vue';
  import TouristChinaMap from '@/views/humanistic-tourism/tourist-map/tourist-china-map.vue';
  // import TouristShanxiMap from '@/views/humanistic-tourism/tourist-map/tourist-shanxi-map.vue';
  import ThreeDimensionalMap from '@/views/humanistic-tourism/tourist-map/three-dimensional-world-map.vue'
  var maps = ['0','1','2'];
  export default {
    components: {
      // TouristWorldMap,
      TouristChinaMap,
      // TouristShanxiMap,
      ThreeDimensionalMap
    },
    data() {
      return {
        active:'1',
      }
    },
    mounted() {
      this.$refs.touristChinaMap.initChinaMap();
    },
    methods: {
      goPrevious() {

        if (this.active == '0') {
          this.active = '2';
        } else{
          this.active = maps[parseInt(this.active)-1]
        }
        this.$nextTick(function(){
           this.initMap(this.active);
        })

      },
      goNext() {
        if (this.active == '2') {
          this.active = '0';
        } else{
          this.active = maps[parseInt(this.active)+1]
        }
        this.$nextTick(function(){
           this.initMap(this.active);
        })
      },
      initMap(index){
        var _this = this;

        switch (index){
          case '0':
             _this.$refs.touristWorldMap.initWorldMap();
            break;
          case '1':
            _this.$refs.touristChinaMap.initChinaMap();
            break;
          case '2':
            // _this.$refs.threeDimensionalMap.init3dMap();
            _this.$refs.touristShanxiMap.initShanxiMap();
          default:
            break;
        }
      }
    },
    watch:{
      active() {
        this.$emit('changeMap',this.active);
      }
    }
  }
</script>

<style scoped lang="scss" type="text/scss">

  .tourist-map {
    overflow: hidden;
  }

  .tourist-map-arrow {
    width: 88px;
    height: 133px;
    position: absolute;
    top: 343px;
  }
  .tourist-map-left {
    background: url(../../../assets/imgs/v2/left-arrow.png) no-repeat;
    left: 31px;
  }
  .tourist-map-right {
    background: url(../../../assets/imgs/v2/right-arrow.png) no-repeat;
    right: 31px;
  }

</style>
